<template>
    <div class="dialog">
        <div class="header">
            {{userInfo.title}}
        </div>
        <div class="content">
            <div class="info" ref = "parentDiv"  @click="clearEmoji">
                <ul class="row" ref = "parentUl">
                    <li v-if="item.targetId == item.senderUserId" class="item left" v-for="(item,index) in infoList" :key="index">
                        <div>
                            <img src="../images/t3.png" alt="人物1" class="headPortrait">
                            <p> {{item.content.content}}</p>
                            <span> {{item.receivedTime|time("h-min-s")}}</span>
                        </div>
                    </li>
                    <li v-else class="right">
                        <div>
                            <span>{{item.sentTime|time("h-min-s")}}</span>
                            <p> {{item.content.content}}</p>
                            <img src="../images/t3.png" alt="人物1" class="headPortrait">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="importIfo">
                <ul class="emojiPop" v-show="emojiToggle">
                    <li v-for="(item,index) in EmojiList" :key="index" @click="sendEmoji(item)">
                        {{item.emoji}}
                    </li>
                </ul>
                <div class="selectFunction">
                    <i title="表情（快捷键ctrl+1）" class="phiz" @click="getEmojiList"></i>
                    <i title="图片（快捷键ctrl+2）" class="camera"></i>
                    <i title="文件（快捷键ctrl+3）" class="file"></i>
                    <i title="视频（快捷键ctrl+4）" class="video" @click="videoCall" data-toggle="modal" data-target="#exampleModal"></i>
                    <i title="语音（快捷键ctrl+5）" class="voice" @click="audioCall" data-toggle="modal" data-target="#exampleModal"></i>
                    <div class="lookHistoriesInfo" v-show="infoHK==3?true:''">
                        <i class="glyphicon glyphicon-time float-right"></i>
                        <span @click="chattingRecords">查看记录</span>
                    </div>
               
                </div>
                <div  @click="clearEmoji">
                    <textarea @keyup.enter="keydownSend" name="import" id="textarea" cols="30" rows="10" v-model="infoNew"></textarea>
                    <button title="快捷键enter" class="btn btn-primary" @click="sendInfo" >发送</button>
                </div>
            </div>
        </div>
        <pop :info = 'info'></pop>
    </div>
</template>
<script>
import pop from "./pop.vue"
export default {
    props:["infoHK"],
    data(){
        return {
            info:{},//弹框信息
            targetId:this.$store.state.targetId, //目标id
            infoLength:0, //记录信息的长度 优化用
            infoList:[], //存放信息
            infoNew:"",//要发送的信息
            callbackInfo:{},//消息发送状态反馈
            EmojiList:[],//获取表情列表
            emojiToggle:false,//控制表情是否显示
            userInfo:this.$store.state.userInfo,
            // sentTime:1,//记录发送的时间，借此判断是否要展示信息发送时间
        }
    },
    created(){
        RongIMLib.RongIMEmoji.init();//表情初始化
        this.EmojiList = RongIMLib.RongIMEmoji.list;//获取表情列表
    },
    methods:{
        sendInfo:function(){//发送信息事件
            if(this.targetId){
                if(!this.infoNew){alert("请输入内容");return false}
                this.$store.commit("sendInfo",{
                    text:this.infoNew,
                    targetId:this.targetId,
                    remark:{
                        messageType:1
                    }
                })
            }else{
                alert("请选择要发送的人")
            } 
        },
        getEmojiList:function(){//点击表情把表情列表显示出来
            this.emojiToggle = !this.emojiToggle
        },
        clearEmoji:function(){//当点击其它地方时要把表情选择框隐藏
            this.emojiToggle = false
        },
        sendEmoji:function(emoji){ //选中表情事件
            console.log(emoji)
            this.emojiToggle = false
            this.infoNew += emoji.emoji
        },
        keydownSend:function(res){ //当点击enter时发送信息
            this.sendInfo()
        },
        chattingRecords:function(){ //查看聊天记录
            
        },
        videoCall:function(){//视频点击事件
            this.info = {
                key:3,
                name:"小强",
                close:"",
                confirm:"挂断",
                title:"视频通话窗口",
                callback:this.popsCallpack
            }
        },
        audioCall:function(){//语音点击事件
            this.info = {
                key:2,
                name:"大强",
                close:"",
                confirm:"挂断",
                title:"语音通话窗口",
                callback:this.popsCallpack
            }
        },
        popsCallpack:function(res){
            console.log(res)
        }
    },
    computed : {
        targetIdChange(){//当切换聊天人事件
            this.userInfo = this.$store.state.userInfo
            return this.$store.state.targetId
        },
        task () {//监控信息的变化当信息变化时重新渲染聊天信息
            return this.$store.state.infoList
        } ,
        callbackInfos () {//监控发送信息状态
            return this.$store.state.callbackInfo
        }
    },
    watch:{
        targetIdChange:function(msgN,msgO){//监听聊天对象变化
            this.targetId = msgN
            this.infoLength = 0
            var data = this.$store.state.infoList
            this.infoList =typeof data == "string" ? JSON.parse(data)[msgN]:data[msgN]
        },
        task :function(store,storeO) {//监听是否有新信息或者是否发送信息，把最新信息渲染到页面
            var data_ =  typeof store == "string" ? JSON.parse(store)[this.targetId]:store[this.targetId]
            if(data_.length != this.infoLength){
                this.length = data_.length
                this.infoList = data_
            }
        } ,
        callbackInfos:function(infoN,infoO){//监听信息是否发送成功回调函数
            var that = this
            if(infoN.sentStatus == 30){ //状态等于30时说明已经发送成功
                that.$store.commit("setInfoList",infoN)
                that.infoNew =""
                setTimeout(function(){
                    that.$refs.parentDiv.scrollTop = that.$refs.parentUl.offsetHeight
                },50)
                // that.sentTime = infoN.sentTime
            }
        }   
    },
    components:{
        pop
    }
}
</script>
<style scoped>
    .dialog{
        /* border-top: 2px solid #bebebe; */
    }
    .header{
        height: 26px;
        color: #333;
        font-size: 16px;
        text-align: center;
        margin: 52px 0 20px 0;
    }
    .content{
        border-top: 2px solid #bebebe;
    }
   
    #textarea{
        resize:none;
        width: 100%;
        height: 100px;
        margin-top: 4px;
        border-radius:4px;
        border: 1px solid #bebebe;
    }
    .importIfo .btn{
        float: right;
    }
    .selectFunction{
        margin-top: 40px;
    }
    .selectFunction>i{
        width: 20px;
        height: 20px;
        display: inline-block;
        background: url("../images/customerservice-icon.png") no-repeat 50% 50%/184%;
    }
    .selectFunction>.phiz{
        background-position: 2px -240px
    }
    .selectFunction>.camera{
        background-position: 2px -270px
    }
    .selectFunction>.file{
        background-position: 2px -470px
    }
    .selectFunction>.video{
        background-position: 2px -402px
    }
    .selectFunction>.voice{
        background-position: 2px -303px
    }
    .info{
        height: 340px;
        padding: 10px 0;
        overflow-y: auto;
        border-left: 1px solid #f9f9f9;
        border-right: 1px solid #f9f9f9;
        border-bottom: 2px solid #bebebe;
    }
    .info>ul{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .info>ul>li{
        margin-top:12px;
        padding: 0 8px;
    }
    .right{
        text-align: right;
    }
    .right>div>p{
        color: #fff;
        background: #3598db
    }
    .right span,.left span{

        font-size: 10px;
    }
    .info p{
        font-size:12px; 
        margin: 0 10px;
        text-align: left;
        max-width: 300px;   
        padding: 6px 10px;
        border-radius: 6px;
        display: inline-block;
        white-space: pre-wrap;
        vertical-align: middle;
        box-shadow: 0 0 24px #d9edf7;
    }
    .headPortrait{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        vertical-align: center;
    }
    .item span{
        color: #3b84bb;
    }
    .lookHistoriesInfo{
        display: inline-block;
        background: #229ce9;
        color: #fff;
        vertical-align: top;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 12px;
        float: right;
    }
    .emojiPop{
        width: 300px;
        padding: 6px;
        height: 100px;
        overflow-y: auto;
        background: #fff;
        position: absolute;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 0 8px grey;
        transform: translateY(-106%);
    }
    .emojiPop>li{
        cursor: pointer;
        display: inline-block;
    }
    .selectFunction>i,.selectFunction div{
        cursor: pointer;
    }
    .modal-body{
        padding: 0;
    }
    
</style>


